<template>
  <div>
    <el-main>
      <el-row type="flex" justify="space-between">
        <el-col v-if="is_admin_view == 0">
          <el-button type="primary" v-if="handelChange" @click='handelChange = false'>设置费用名单</el-button>
        </el-col>
      </el-row>
      <div v-if="handelChange">
        <el-table style="width:90%" :header-cell-style="{background:'#F3F8FE'}" @row-click="rowClick" align="center"
          :data="ListArr" border class="tableHeight">
          <el-table-column align="center" prop="pime" label="消息时间">
          </el-table-column>
          <!-- <el-table-column
             align="center"
               prop="type"
               label="消息类型"
               >
             </el-table-column> -->
          <el-table-column align="center" prop="title" width="380" label="消息标题">
          </el-table-column>
          <el-table-column align="center" prop="names" label="接收名单">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="see" @click="see(scope.row.id)" type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="width:90%">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
            :total="page.count" align='left'></el-pagination>
        </div>
      </div>
      <div v-else>
        <el-table style="width:90%" class="tableHeight" @row-click="rowClick" align="center" :data="pushList" border>
          <el-table-column align="center" prop="name" label="姓名">
          </el-table-column>
          <el-table-column align="center" prop="position" label="职位">
          </el-table-column>
          <el-table-column align="center" prop="email" label="邮箱地址">
          </el-table-column>
          <el-table-column align="center" prop="ctime" label="添加时间">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="deletText" @click="deleteUser(scope.row.id)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="margin-top:20px;">
          <el-button type="primary" @click='dialogVisible = true'>添加名单</el-button>
          <el-button type="info" @click='handelChange = true'>返回</el-button>
        </div>
      </div>
    </el-main>
    <el-dialog :close-on-click-modal='false' title="设置推送用户" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <p class="input_item">
        <el-input v-model="add.name" placeholder="请输入姓名"></el-input>
      </p>
      <p class="input_item">
        <el-input maxlength="11" v-model="add.mobile" placeholder="请输入手机号"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.email" placeholder="请输入邮箱"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.position" placeholder="请输入职位"></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="dialogVisible = false">取消操作</el-button>
        <el-button type="button" class="pubBtn" style="width:98px;" @click="addSave">保存</el-button>
      </span>
    </el-dialog>
    <Service />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pushIndex, pushAdd, tuserList, pushDelete } from "@/api"
import Service from '@/components/Service'
export default {
  components: {
    Service
  },
  data() {
    return {
      add: {
        name: "",
        mobile: "",
        email: "",
        position: "",
      },
      dialogVisible: false,
      handelChange: true,
      ListArr: [],
      page: [],
      pushList: [],
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view'
    ]),
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await pushIndex({ type: 1 });
        const List = await tuserList({ type: 1 });
        this.ListArr = res.list;
        this.page = res.page;
        this.pushList = List.list;
      } catch (e) {
        this.$message.error(e.message);
      }

    },
    rowClick(row) {
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await pushIndex({
          page: size,
          type: 1
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await pushIndex({
          page: currentPage,
          type: 1
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    async addSave() {
      try {
        const {
          name,
          mobile,
          email,
          position,
        } = this.add;
        await pushAdd({
          name,
          mobile,
          email,
          position,
          type: 1
        })
        this.getList();
        this.dialogVisible = false
        this.$message.success("添加成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async deleteUser(id) {
      try {
        await pushDelete({
          id: id
        })
        this.getList();
        this.$message.success("删除成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    see(id) {
      this.$router.push({ path: "/costdetails", query: { id: id } })
    }
  }
}
</script>

<style scoped lang="less">
.diff {
  color: #F05C6C;
}

.input_item {
  margin-bottom: 20px;
}
</style>
